<script setup lang="ts">
import { ref, onMounted, onUnmounted } from 'vue'
import type { TeacherItem, TeacherParams } from '@/types/teacher.d'
import { getTeacherListAPI } from '@/pagesOrgan/services/teacher'
import TeacherCard from './components/TeacherCard.vue'

// 教师列表数据
const teacherList = ref<TeacherItem[]>([])
// 加载状态
const isLoading = ref(false)
// 分页数据
const currentPage = ref(1)
const pageSize = ref(10)
const total = ref(0)
// 搜索参数
const searchParams = ref<TeacherParams>({ page: currentPage.value, pageSize: pageSize.value })
// 是否有更多数据
const hasMore = ref(true)
// 下拉刷新状态
const isTriggered = ref(false)

// 获取教师列表
const getTeacherList = async () => {
  isLoading.value = true
  try {
    const res = await getTeacherListAPI(searchParams.value)
    // 如果是第一页，替换数据；否则追加数据
    if (currentPage.value === 1) {
      teacherList.value = res.data.rows
    } else {
      teacherList.value = [...teacherList.value, ...res.data.rows]
    }
    total.value = res.data.total
    // 判断是否还有更多数据
    hasMore.value = teacherList.value.length < total.value
  } catch (error) {
    console.error('获取教师列表失败:', error)
    uni.showToast({ title: '获取教师列表失败', icon: 'none' })
  } finally {
    isLoading.value = false
    isTriggered.value = false
  }
}

// 跳转到新增教师页面
const navigateToAdd = () => {
  uni.navigateTo({ url: '/pagesOrgan/teacher/add' })
}

// 搜索教师
const handleSearch = (e: Event) => {
  const target = e.target as HTMLInputElement
  searchParams.value = { ...searchParams.value, name: target.value, page: 1 }
  currentPage.value = 1
  getTeacherList()
}

// 下拉刷新
const onRefresherrefresh = () => {
  isTriggered.value = true
  currentPage.value = 1
  searchParams.value = { ...searchParams.value, page: 1 }
  getTeacherList()
}

// 上拉加载更多
const onScrolltolower = () => {
  if (!isLoading.value && hasMore.value) {
    currentPage.value++
    searchParams.value = { ...searchParams.value, page: currentPage.value }
    getTeacherList()
  }
}

// 生命周期
onMounted(() => {
  getTeacherList()
  uni.$on('refreshTeacherList', getTeacherList)
})

onUnmounted(() => {
  uni.$off('refreshTeacherList', getTeacherList)
})
</script>

<template>
  <view class="teacher-management">
    <!-- 搜索框 -->
    <view class="search-container">
      <view class="search-input">
        <image class="search-icon" src="@/static/images/search.png"></image>
        <input
          type="text"
          placeholder="搜索教师姓名..."
          @input="(event) => handleSearch(event as unknown as Event)"
        />
      </view>
    </view>

    <!-- 教师列表 -->
    <scroll-view
      class="teacher-list"
      :scroll-y="true"
      :refresher-enabled="true"
      @refresherrefresh="onRefresherrefresh"
      :refresher-triggered="isTriggered"
      @scrolltolower="onScrolltolower"
    >
      <block v-if="isLoading && currentPage === 1">
        <view class="loading-item" v-for="i in 3" :key="i">
          <view class="loading-avatar"></view>
          <view class="loading-info">
            <view class="loading-name"></view>
            <view class="loading-detail"></view>
          </view>
        </view>
      </block>
      <block v-else-if="teacherList.length > 0">
        <TeacherCard v-for="teacher in teacherList" :key="teacher.id" :teacher="teacher" />
        <!-- 加载更多提示 -->
        <view class="loading-more" v-if="isLoading && currentPage > 1">
          <text>加载中...</text>
        </view>
      </block>
      <block v-else>
        <view class="empty-state">
          <image class="empty-icon" src="@/static/images/empty.png"></image>
          <text class="empty-text">暂无教师数据</text>
        </view>
      </block>
    </scroll-view>

    <!-- 新增按钮 -->
    <view class="add-btn" @click="navigateToAdd">
      <image class="add-icon" src="@/static/images/add.png"></image>
    </view>
  </view>
</template>

<style lang="scss">
.teacher-management {
  padding-top: var(--custom-navbar-height);
  min-height: 100vh;
  box-sizing: border-box;
  background-color: #f5f5f5;

  .search-container {
    padding: 16rpx;
    background-color: #fff;

    .search-input {
      display: flex;
      align-items: center;
      padding: 12rpx 20rpx;
      background-color: #f0f0f0;
      border-radius: 8rpx;

      .search-icon {
        width: 28rpx;
        height: 28rpx;
        margin-right: 16rpx;
      }

      input {
        flex: 1;
        font-size: 28rpx;
        color: #333;
      }
    }
  }

  .teacher-list {
    padding: 16rpx;
    height: calc(100vh - var(--custom-navbar-height) - 100rpx);
    box-sizing: border-box;

    .loading-item {
      display: flex;
      padding: 20rpx;
      margin-bottom: 16rpx;
      background-color: #fff;
      border-radius: 8rpx;

      .loading-avatar {
        width: 120rpx;
        height: 120rpx;
        border-radius: 50%;
        margin-right: 20rpx;
        background-color: #f0f0f0;
        animation: pulse 1.5s infinite;
      }

      .loading-info {
        flex: 1;

        .loading-name,
        .loading-detail {
          height: 30rpx;
          margin-bottom: 16rpx;
          background-color: #f0f0f0;
          border-radius: 4rpx;
          animation: pulse 1.5s infinite;
        }

        .loading-name {
          width: 60%;
        }

        .loading-detail {
          width: 80%;
        }
      }
    }

    .loading-more {
      padding: 20rpx;
      text-align: center;
      font-size: 28rpx;
      color: #999;
    }

    .empty-state {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      height: 400rpx;

      .empty-icon {
        width: 160rpx;
        height: 160rpx;
        margin-bottom: 20rpx;
      }

      .empty-text {
        font-size: 30rpx;
        color: #999;
      }
    }
  }

  .add-btn {
    position: fixed;
    bottom: 60rpx;
    right: 60rpx;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 120rpx;
    height: 120rpx;
    background-color: #409eff;
    border-radius: 50%;
    box-shadow: 0 4rpx 10rpx rgba(0, 0, 0, 0.1);
    z-index: 99;

    .add-icon {
      width: 40rpx;
      height: 40rpx;
      margin-bottom: 8rpx;
    }

    text {
      font-size: 24rpx;
      color: #fff;
    }
  }
}

@keyframes pulse {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
  100% {
    opacity: 1;
  }
}
</style>
